<script setup lang="ts">
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import { index_api } from "@/package/other/api/guider_realize_value";
import { Router } from "@/utils/router";

import IndexNewsItem from "./components/index-news-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad((options) => {
  uni.setNavigationBarTitle({ title: options?.name });
  tempData.id = options?.id || "";
  reloadList();
});
onReachBottom(() => loadMoreList());

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return index_api({ ...query, cate_id: tempData.id });
  });

const newsClick = (index: number) => {
  const news = listData.value[index] as any;
  if (news.type === 2) {
    Router.navigateTo(
      `/package/other/pages/news/video?${Router.dataToQuery({
        src: news.video_url,
        poster: news.pic_url,
        title: news.title,
      })}`
    );
  } else {
    Router.navigateTo(
      `/package/other/pages/news/detail?id=${news.id}&title=${news.title}`
    );
  }
};

const tempData = { id: "" };
</script>

<template>
  <view class="list-data">
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="newsClick(d)"
      >
        <IndexNewsItem :info="i" />
      </view>
    </view>

    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
}

.list-data {
  .list-data-item {
    margin: 0 30rpx 20rpx;
  }
}
</style>